<template>
  <div class="wrap">
    <div class="play_wrap" id="player">
      <div class="search_bar">
        <img src="./assets/images/player_title.png" alt="" />
        <input @keyup.enter="searchMusic" v-model="musicName" type="text" />
      </div>
      <!-- 中心模板 -->
      <div class="center_con" v-show="istrue==true">
        <!-- 左侧音乐栏子组件 -->
        <musicList ref="musicList"></musicList>
        <b class="rightBox" v-show="isshow==false"></b>
        <!-- 中间播放器页面 -->
        <musicCenter ref="musicCenter"  v-show="isshow==true"></musicCenter>
        <!-- 评论列表 -->
        <commentList ref="commentList"  v-show="isshow==true"></commentList>
      </div>
      <div class="center_con" v-show="istrue==false">
        <div class="home"></div>
      </div>
      <div class="audio_con">
        <audio @play="imgMove(true)" @pause="imgMove(false)" :src="audioSrc" controls autoplay loop class="myaudio"></audio>
      </div>
    </div>
  </div>
</template>

<script>
// 导入子组件
import MusicCenter from "./components/musicCenter.vue";
import musicList from "./components/musicList.vue";
import commentList from "./components/commentList.vue";
// 导入axios
import axios from "axios";
export default {
  // 注册子组件
  components: {
    musicList,
    MusicCenter,
    commentList,
  },
  data() {
    return {
      musicName: "",
      audioSrc:'',
      istrue:false,
      isshow:false
    };
  },
  methods: {
    searchMusic() {
      axios({
        url: "https://autumnfish.cn/search",
        method: "get",
        params: {
          keywords: this.musicName,
        },
      }).then((res) => {
        //成功回调
        if (res.status==200) {
          this.istrue=true
          console.log(this.istrue);
          this.$refs.musicList.list = res.data.result.songs;
        }
       
      });
    },
    listenToMusic(id){
      axios({
        url:'https://autumnfish.cn/song/url',
        method:'get',
        params: {
          id
        }
      }).then(res=>{
        //成功回调
        this.isshow=true
        this.audioSrc=res.data.data[0].url
      });
    },
    getcomment(id){
      axios({
        url:'https://autumnfish.cn/comment/music',
        method:'get',
        params: {id}
      }).then(res=>{
        //成功回调
        this.$refs.commentList.list=res.data.hotComments
      });
    },
    getdetail(ids){
      axios({
        url:'https://autumnfish.cn/song/detail',
        method:'get',
        params: {
          ids
        }
      }).then(res=>{
        //成功回调
        console.log(res)
        this.$refs.musicCenter.imgSrc=res.data.songs[0].al.picUrl
      });
    },
    imgMove(isTrue){
      if (isTrue) { 
         this.$refs.musicCenter.isTrue=true
      }else{
        this.$refs.musicCenter.isTrue=false
      }
    }
  },
};
</script>

 <style>
body,
ul,
dl,
dd {
  margin: 0px;
  padding: 0px;
}

.wrap {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url("./assets/images/bg.jpg") no-repeat;
  background-size: 100% 100%;
}

.play_wrap {
  width: 800px;
  height: 544px;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -400px;
  margin-top: -272px;
  /* background-color: #f9f9f9; */
}

.search_bar {
  height: 60px;
  background-color: #ec4141;
  overflow: hidden;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 11;
}

.search_bar img {
  margin-left: 23px;
}

.search_bar input {
  margin-right: 23px;
  width: 296px;
  height: 34px;
  border-radius: 17px;
  border: 0px;
  background: url("./assets/images/zoom.png") 265px center no-repeat
    rgba(255, 255, 255, 0.45);
  text-indent: 15px;
  outline: none;
}

.center_con {
  height: 435px;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
}

.center_con .home{
  width: 100%;
  height: 100%;
  background: url('./assets/images/home.png') no-repeat;
}

.center_con .rightBox{
  display: inline-block;
  width: 100%;
  height: 100%;
  background: url('./assets/images/right.png') no-repeat;
}

.song_wrapper {
  width: 200px;
  height: 435px;
  box-sizing: border-box;
  /* padding: 10px; */
  list-style: none;
  margin-top: 10px;
  background: url("./assets/images/line.png") right center no-repeat;
  position: relative;
  overflow: hidden;
  overflow-y: scroll;
}

/* 定义滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  /* background-color: rgba(240, 240, 240, 1); */
}

/* 定义滚动条轨道 内阴影+圆角 */
/* ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
  border-radius: 10px;
  background-color: rgba(240, 240, 240, 0.5);
} */

/* 定义滑块 内阴影+圆角 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  height: 20px;
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
  background-color: rgba(240, 240, 240, 0.5);
}

.song_list li {
  font-size: 12px;
  color: #333;
  line-height: 36px;
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  padding: 0px 10px;
}

.song_list li:hover {
  color: #ec4141;
}


.song_list li.active {
  background-color: #ec4141;
  color: #fff;
}

.player_con {
  width: 400px;
  height: 435px;
  position: relative;
}

.disc {
  position: absolute;
  left: 73px;
  top: 60px;
  z-index: 9;
}

.cover {
  position: absolute;
  left: 125px;
  top: 112px;
  width: 150px;
  height: 150px;
  border-radius: 75px;
  z-index: 8;
}

.comment_list {
  width: 200px;
  height: 435px;
  box-sizing: border-box;
  padding: 10px;
  list-style: none;
  background: url("./assets/images/line.png") left center no-repeat;
  overflow: hidden;
  position: relative;
  overflow-y: scroll;
}

.comment_list dl {
  padding-left: 55px;
  position: relative;
  margin-bottom: 20px;
}

.comment_list dt {
  position: absolute;
  left: 4px;
  top: 0px;
}

.comment_list dt img {
  width: 40px;
  height: 40px;
  border-radius: 20px;
}

.comment_list dd {
  font-size: 12px;
}

.comment_list .name {
  font-weight: bold;
  color:#ec4141;
  margin-top: 5px;
}

.comment_list .detail {
  color: #333;
  margin-top: 5px;
  line-height: 18px;
}

.audio_con {
  height: 50px;
  background-color: #f1f3f4;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.myaudio {
  width: 800px;
  height: 40px;
  margin-top: 5px;
  outline: none;
  background-color: #f1f3f4;
}

/* 旋转的动画 */
@keyframes Rotate {
  from {
    transform: rotateZ(0);
  }

  to {
    transform: rotateZ(360deg);
  }
}

/* 旋转的类名 */
.autoRotate {
  animation-name: Rotate;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-timing-function: linear;
  animation-duration: 5s;
}

/* 是否正在播放 */
.playing {
  animation-play-state: running;
}

.play_bar {
  position: absolute;
  left: 200px;
  top: -10px;
  z-index: 10;
  transform: rotate(-25deg);
  transform-origin: 12px 12px;
  transition: 1s;
}

/* 播放杆 转回去 */
.play_bar.playing {
  transform: rotate(0);
}
</style>
